<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset="UTF-8">
    <title>Circular Layout</title>
  </head>
  
  <body>
    <div id="mountNode"></div>
    <script src="../build/g6.js"></script>
    <script src="./assets/d3-4.13.0.min.js"></script>
    <script>
      const data = {
        "nodes": [{
          "id": "0",
          "label": "0",
          "x": 100,
          "y": 30
        },
        {
          "id": "1",
          "label": "1",
          "x": 150,
          "y": 80
        },
        {
          "id": "2",
          "label": "2",
          "x": 50,
          "y": 80
        }],
        "edges": [{
          "source": "0",
          "target": "1"
        },
        {
          "source": "0",
          "target": "2"
        }, {
          "source": "2",
          "target": "1"
        }]
      };
      const data2 = {
        "nodes": [{
          "id": "0",
          "label": "0",
          "x": 200,
          "y": 130
        },
        {
          "id": "n1",
          "label": "n1",
          "x": 250,
          "y": 180
        },
        {
          "id": "n2",
          "label": "n2",
          "x": 150,
          "y": 180
        }, 
        {
          "id": "n3",
          "label": "n3",
          "x": 200,
          "y": 210
        }],
        "edges": [{
          "source": "0",
          "target": "n1"
        },
        {
          "source": "0",
          "target": "n2"
        },
        {
          "source": "n2",
          "target": "n1"
        },
        {
          "source": "n2",
          "target": "n3"
        }]
      };

      const graph = new G6.Graph({
        container: 'mountNode',
        width: 1000,
        height: 800,
        animate: true,
        // layout: {
        //   type: 'circular',
        //   center: [500, 300],
        //   radius: 200,
        //   ordering: null
        // },
        defaultNode: {
          size: [20, 20],
          color: 'steelblue'
        },
        defaultEdge: {
          size: 1,
          color: '#e2e2e2',
          style: {
            endArrow: {
              path: 'M 4,0 L -4,-4 L -4,4 Z',
              d: 4
            }
          }
        }
      });
      graph.data(data);
      graph.render();

      setTimeout(function () {
        graph.changeData(data2);
      }, 3000);
    </script>
  </body>

</html>